<template id="VehicleTable">
  <div class="VehicleTable">
    <FOURCONCOR />
    <i class="close" @click="changeBoxShow"></i>
    <PaddingCom :title="'车辆管控'">
      <VehiceleCom />
      <div class="carManag">
        <p>园区车辆分类管理</p>
        <timeInput
          class="publicinput"
          :option="options"
          @changeTime="timeDate"
        />
      </div>
      <div class="park">
        <div v-for="(item, i) in listCar" :key="i">
          <ParkCar
            :listCar="item.value"
            :rylistCar="item.car_in_num"
            :cylistCar="item.car_out_num"
            :parkcarId="'carId1' + i"
          />
          <p>{{ item.name }}</p>
        </div>
        <!-- <div>
          <ParkCar :listCar="listCar[1].value" :parkcarId="carId2" />
          <p>临时车辆</p>
        </div>
        <div>
          <ParkCar :listCar="listCar[2].value" :parkcarId="carId3" />
          <p>白名单车辆</p>
        </div>
        <div>
          <ParkCar :listCar="listCar[3].value" :parkcarId="carId4" />
          <p>危化品车辆</p>
        </div> -->
      </div>
      <el-divider></el-divider>
      <div class="manageorLsit">
        <div style="width: 100%">
          <div
            class="carManag"
            style="display: flex; justify-content: space-between"
          >
            <p>园区各单位车辆管理</p>
            <timeSingleInput class="publicinput bigscreen" @changeTime1="timeDate1" />
          </div>
          <parkdwCar
            :linedataMore="linedataMore"
            v-if="linedataMore.length"
            style="width: 100%"
          />
          <div
            v-if="!linedataMore.length"
            style="
              width: 100%;
              min-height: 8vw;
              line-height: 8vw;
              text-align: center;
              color: #fff;
            "
          >
            数据加载中...
          </div>
        </div>
        <!--<parkdwList
          style="width: 50%"
          class="indexList"
          :loadstatus="false"
          :list="listdata"
          :topData="titileDate"
          :title="'各单位入园车辆榜单'"
          @loadingMore="loadingMore"
        />-->
      </div>
    </PaddingCom>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import PaddingCom from "components/paddingCom";
import VehiceleCom from "components/vehicleCom";
import publicInput from "components/publicInput";
import timeInput from "components/timeInput";
import timeSingleInput from "components/timeSingleInput";

import ParkCar from "components/echarts/parkCar";
import parkdwCar from "components/echarts/parkdwCar";
import parkdwList from "components/listable/index";
import FOURCONCOR from "components/fourCorner";
import {
  companycarinoroutbar,
  companycarinoroutlist,
  carstatsbytype,
} from "api/zdh";

export default {
  name: "VehicleTable",
  components: {
    PaddingCom,
    VehiceleCom,
    publicInput,
    timeInput,
    timeSingleInput,
    ParkCar,
    parkdwCar,
    parkdwList,
    FOURCONCOR,
  },
  // 定义属性
  data() {
    return {
      titileDate: [
        {
          name: "序号",
          deindex: "id",
          callBack: function (n, i) {
            return i + 1;
          },
        },
        {
          name: "企业名称",
          deindex: "name",
        },
        {
          name: "进出车辆总数",
          deindex: "value",
        },
      ],
      options: [
        {
          value: "选项12",
          label: "黄金糕23",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      carId1: "parkCarpie1",
      carId2: "parkCarpie2",
      carId3: "parkCarpie3",
      carId4: "parkCarpie4",
      linedataMore: [],
      listdata: [],
      page: 1,
      pageSize: 10,
      listCar: [],
      rylistCar: 0,
      cylistCar: 0,
      start_date: "",
      end_date: "",
      loading: null,
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
      // 默认时间
        timeDefault () {
            let date = new Date()
            // 通过时间戳计算
            let defalutStartTime = date.getTime() - 7 * 24 * 3600 * 1000 // 转化为时间戳
            let defalutEndTime = date.getTime()
            let startDateNs = new Date(defalutStartTime) 
            let endDateNs = new Date(defalutEndTime)
            // 月，日 不够10补0
            defalutStartTime = startDateNs.getFullYear() + '-' + ((startDateNs.getMonth() + 1) >= 10 ? (startDateNs.getMonth() + 1) : '0' + (startDateNs.getMonth() + 1)) + '-' + (startDateNs.getDate() >= 10 ? startDateNs.getDate() : '0' + startDateNs.getDate())
            defalutEndTime = endDateNs.getFullYear() + '-' + ((endDateNs.getMonth() + 1) >= 10 ? (endDateNs.getMonth() + 1) : '0' + (endDateNs.getMonth() + 1)) + '-' + (endDateNs.getDate() >= 10 ? endDateNs.getDate() : '0' + endDateNs.getDate())
            return [defalutStartTime, defalutEndTime]
        }
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    
        // 默认时间
        timeDefault12 () {
            let date = new Date()
            // 通过时间戳计算
            let defalutStartTime = date.getTime() - 7 * 24 * 3600 * 1000 // 转化为时间戳
            let defalutEndTime = date.getTime()
            let startDateNs = new Date(defalutStartTime) 
            let endDateNs = new Date(defalutEndTime)
            // 月，日 不够10补0
            defalutStartTime = startDateNs.getFullYear() + '-' + ((startDateNs.getMonth() + 1) >= 10 ? (startDateNs.getMonth() + 1) : '0' + (startDateNs.getMonth() + 1)) + '-' + (startDateNs.getDate() >= 10 ? startDateNs.getDate() : '0' + startDateNs.getDate())
            defalutEndTime = endDateNs.getFullYear() + '-' + ((endDateNs.getMonth() + 1) >= 10 ? (endDateNs.getMonth() + 1) : '0' + (endDateNs.getMonth() + 1)) + '-' + (endDateNs.getDate() >= 10 ? endDateNs.getDate() : '0' + endDateNs.getDate())
            return [defalutStartTime, defalutEndTime]
        },
    timeDate1(value) {
      this.getCompanycar(value);
    },
    timeDate(value) {
      //console.log("我椒value1",value)
      this.start_date = value[0];
      this.end_date = value[1];
      this.getCarstatsbytype();
    },
    // 各单位入园车辆榜单
    async getCompanycarInoroutlist() {
      let res = await companycarinoroutlist();
      if (this.$iscode(res)) {
        const {
          data: { list = [] },
        } = res;
        list.length && (this.listdata = this.listdata.concat(list));
      }
    },
    // 加载更多
    loadingMore() {
      this.page += 1;
      this.getCompanycarInoroutlist();
    },
    changeBoxShow() {
      this.$emit("showbox", false);
    },
    getLoading() {
      this.loading = this.$loading({
        lock: true, //同v-loading的修饰符

        backgroundColor: "rgba(55,55,55,0.4)", //背景色
        spinner: "el-icon-loading", //加载图标
        target: this.$refs.loading, //loading需要覆盖的DOM节点，默认为body
      });
    },
    // 获取园区各单位车辆管理
    async getCompanycar(date) {
      this.linedataMore = [];

      let res = await companycarinoroutbar({
        date,
      });
      if (this.$iscode(res)) {
        const { data } = res;
        this.linedataMore.push(data);
        // //console.log(this.linedataMore);
      }
    },
    //
    async getCarstatsbytype() {
      this.listCar = [];
      if (this.start_date == "" && this.end_date == "") {
        let res = await carstatsbytype();
        if (this.$iscode(res)) {
          const {
            data: { list = [] },
          } = res;
          list.length && (this.listCar = this.listCar.concat(list));
        }
      } else {
        let res = await carstatsbytype({
          start_date: this.start_date,
          end_date: this.end_date,
        });
        if (this.$iscode(res)) {
          const {
            data: { list = [] },
          } = res;
          
          list.length && (this.listCar = this.listCar.concat(list));
        }
      }
    },
    formatDateTime(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      var second = date.getSeconds();
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d;
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getCompanycarInoroutlist();

    this.getCompanycar(this.formatDateTime(new Date()));
      this.start_date = this.timeDefault[0];
      this.end_date = this.timeDefault[1];
    // this.getCarstatsbytype();
    this.timeDate(this.timeDefault12())  
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="scss" scoped>
/deep/ .ultitle {
  width: 96%;
}
.VehicleTable {
   
 width: 19vw;
  background: rgba(11, 58, 113, 0.9);
  padding: 0.78vw 0.78vw;
  position: relative;
  .close {
    width: 0.5vw;
    height: 0.5vw;
    display: block;
    position: absolute;
    right: 0.5vw;
    top: 0.5vw;
    background: url("../../../../../../assets/images/indexBody/amapDialog/closeButton.png");
    background-size: 100% 100%;
  }
}
.carManag {
  display: flex;
  justify-content: space-between;
  p {
    font-size: 23px;
    font-weight: normal;
  }
}
.park {
  padding: 0.83vw 0 0 0;
  height:0;
  padding-bottom:27%;
  display: flex;
  justify-content: space-between;
  width: 100%;
  div {
    width: 100%;
  }
  p {
    text-align: center;
    font-size: 0.52vw;
    margin-top: 0.23vw;
  }
}
.el-divider--horizontal {
  margin: 0;
  margin: 0.8vw 0 0.76vw 0;
  background: #499be7;
}
.manageorLsit {
  display: flex;
  justify-content: space-between;
}
/deep/ .indexList {
  height: 6vw;
}
</style>
